<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>咖啡首页</title>
<link href="common.css" rel="stylesheet" />
<style type="text/css">
.last a:hover{color:red;}
.content{background-color:#2d241f;}
.center{width:1004px;position:relative;left:-502px;margin-left:50%;background-color:#201612;padding-left:20px;padding-top:15px;}
.top{height:97px;background:url(img/%E6%9C%AA%E6%A0%87%E9%A2%98-1.png) no-repeat;padding-left:253px;padding-top:47px;}
.index li{float:left;}
.index a{display:block;width:98px;height:28px;color:#7e725e;border-right:1px solid #5f5754;text-align:center;line-height:33px;font-size:15px;}
.index a:hover{cursor:pointer;color:#fff;}
.banner{margin-bottom:32px;}
.three{padding-left:271px;background:url(img/index1.jpg) left top no-repeat;margin-bottom:50px;}
.four{border-top:1px solid #49413e;border-bottom:1px solid #49413e;padding-top:30px;height:232px;overflow:hidden;position:relative;width:780px;}
.right{position:absolute;top:747px;left:557px;}
.left{position:absolute;top:742px;left:20px;}
.bo{position:absolute;left:0;}
.bo li{height:179px;margin-right:17px;float:left;text-align:center;width:153px;color:#7e725e;font-size:14px;margin-bottom:35px;}
.bo a:hover{color:red;border-bottom:1px solid red;}
.bo img{margin-bottom:17px;}
.last{padding-top:28px;padding-bottom:20px;}
.last li{float:left;}
.last a{display:block;text-align:center;border-left:1px solid #7e725e;color:#7e725e;width:68px;height:13px;}
#last a{width:368px;position:absolute;left:678px;text-align:left;border:none;}
.lst{height:439px;background-color:#271d19; width:251px;padding:18px;position:absolute;top:540px;right:43px;}
.head{font-size:20px;color:#756a57;font-weight:bold;border-bottom:1px solid #49413e;margin-bottom:6px;height:35px;}
.head span{float:right;color:#756a57;}
.pic{margin-bottom:27px;background:url(img/right1.jpg) no-repeat; width:217px; height:166px;position:relative;}
.pic input{position:absolute;bottom:4px;width:16px;height:19px;background-color:#C69;border:1px solid #C69;}
#head1{margin-bottom:24px;}
.last-index li{margin-bottom:11px;}
.last-index img{margin-right:15px;}
.last-index a{color:#7e725e;font-size:14px;}
.last-index a:hover{color:red;border-bottom:1px solid #9F6;}
.bo a{color:#7e725e;}
</style>
</head>

<body>
<div class="content">
   <div class="center">
     <div class="top">
       <ul class="index clearfix">
        <li><a href="#">网站首页</a></li>
        <li><a href="关于我们.html">关于我们</a></li>
        <li><a href="最新动态.html">最新动态</a></li>
        <li><a href="门店展示.html">门市展示</a></li>
        <li><a href="精品展示.html">精品推荐</a></li>
        <li><a href="消费指南.html">消费指南</a></li>
        <li><a href="联系我们.html">联系我们</a></li>
       </ul>
     </div>
     <div class="banner"><img src="img/banner.png" width="945" height="409" /></div>
     <div class="three"><img src="img/font.png" /></div>
     <div class="four">
       <ul class="bo clearfix">
           <li><a href="展示3.html"><img src="img/bo1.jpg" width="153" height="151" />门店展示</a></li>
           <li><a href="展示2.html"><img src="img/bo2.jpg" width="153" height="151" />门店展示</a></li>
           <li><a href="展示4.html"><img src="img/bo3.jpg" width="153" height="151" />门店展示</a></li>
           <li><a href="门店展示1.html"><img src="img/bo4.jpg" width="153" height="151" />门店展示</a></li>
       </ul>   
     </div>
     <div class="left"><img src="img/position-left.png" /></div>
     <div class="right"><img src="img/position-right.jpg" /></div>
     <ul class="last clearfix">
        <li><a href="关于我们.html">关于我们</a>
        <li><a href="本店特色.html">本店特色</a>
        <li><a href="联系我们.html">联系我们</a>
        <li><a href="联系我们--请您留言.html">留言反馈</a>
        <li><a href="友情链接.html">友情链接</a></li>
        <li><a href="登录.html">我的账户</a></li>
        <li id="last"><a href="#">版权所有 Copyright(c)2009-2012杭州咖啡厅网站</a></li>
        <li id="last"><a href="#">版权所有 Copyright(c)2009-2012杭州咖啡厅网站</a></li>
     </ul>
     <div class="lst"> 
       <div class="head">精品推荐<span>DRODUCTS</span></div>
       <div class="pic">
          <input type="button" value="1"/>
          <input type="button" value="2"/>
          <input type="button" value="3"/>
       </div>
       <div class="head" id="head1">最新动态<span>NEWS</span></div>
       <ul class="last-index">
        <li><img src="img/1.jpg" /><a href="首页链接1.html">经典咖啡，欧式茶，花果茶</a></li>
        <li><img src="img/1.jpg" /><a href="首页链接2.html">咖啡新品玻璃器具</a></li>
        <li><img src="img/1.jpg" /><a href="#">做出真正适合中国人的好咖啡</a></li>
        <li><img src="img/1.jpg" /><a href="#">咖啡拉花的9种窍门</a></li>
        <li><img src="img/1.jpg" /><a href="#">咖啡网站改版通知</a></li>
       </ul>
     </div>
   </div>
</div>
<script src="jquery.min.js"></script>
<script>
var arr=["img/banner.png","img/banner2.png","img/banner3.png"]
var timer=null;
var i=1;
var timer1=null;
var j=$(".bo")[0].offsetLeft;;
$(".bo li").clone().appendTo($(".bo"));
$(".bo li").clone().appendTo($(".bo"));
$(".bo").css("width",$(".bo li").length*$(".bo li")[0].offsetWidth+"px");

$().ready(function() {
    clearInterval(timer);
	timer1 = setInterval(lunbo,2000);
	timer=setInterval(move,2000);
	$(".bo").hover(function(){
	clearInterval(timer1);
   },function(){
	  timer1 = setInterval(lunbo,2000); 
   })
})
function lunbo(){
		j-=170;
		$(".bo").animate({left:j},1000,"linear",function(){
			if($(".bo")[0].offsetLeft<=-$(".bo")[0].offsetWidth/4){
				$(".bo").css("left",0);
				j=0;
			}
			$(".bo").css("left",j+"px");
		});
	}
function move(){
	if(i==arr.length){
		i=0;
	}
   $(".banner img").attr("src",arr[i]);
	i++;
}
var z=42+20;
var pic=["url(img/right1.jpg)","url(img/right2.jpg)","url(img/right3.jpg)"];
$(".pic input").css("right",function(){
	z=z-20;
	return z+"px";
}).hover(function() {
    $(".pic").css("background",pic[$(this).index()]);
});
</script>
</body>
</html>
